<template>
  <div>
    <div v-if="onLoad == 'wait'" class="onload">
          <Spin fix>
              <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
              <div>正在配置，请稍等</div>
          </Spin> 
    </div>
    <div v-else-if=" onLoad == 'success'">
       <Divider plain orientation="left">测评结果</Divider>
      <result></result>
      <Divider plain orientation="left">推荐资产配置</Divider>
      <asset :assetData="assetData"></asset>
      <Divider plain orientation="left">推荐基金列表</Divider>
      <fundList :fund_list="assetData.fund_list"></fundList>
      <Divider plain orientation="left">选择回测时间</Divider>
      <select-date></select-date>
      <Button :style="{margin:'40px 0 0'}" @click="startBackTest"  type="primary">开始回测</Button>
    </div>
    <div v-else>
      配置失败
    </div>
   

  </div>
</template>

<script>
import fundList from './fundList'
import result from './result'
import asset from './asset'
import {testing_configure} from '@/api/api'
import SelectDate from './selectDate.vue'



export default {
    components:{
      fundList,
      result,
      asset,
      SelectDate
    },
    data () {

      return {
        assetData:{},
        onLoad:'wait',
        
      }
    },
    activated() {
        this.testing_configure()

    },
    methods:{
      testing_configure() {
        let data = {
            "account_id":this.$store.state.account_id,
            // "account_id": '60713415df0056e0afdc4eb6'
            "key":this.$store.state.key,
            
            "option":this.$store.state.option
        }
        testing_configure(data)
        .then(res => {
          if (res.code == 0) {
            // this.assetData = res.data
            console.log(res.data)
            this.assetData = Object.assign(res.data)
            let fund = [].concat(res.data.fund_list[1], res.data.fund_list[2] )
            this.$store.commit('setFund', fund)
            console.log(this.$store.state.fund)
            this.onLoad = 'success'
          }
        })
        .catch(err => {
            this.onLoad = 'err'

        })
      },
      startBackTest(){
        if (this.$store.getters.getDate('end') - this.$store.getters.getDate('start') <= 0) {
          this.$Message.warning('回测结束时间须大于开始时间');
        } else {
           this.$store.commit('setRecommendStep',3)
           this.$store.commit('setRecommendCurStep',3)

        }
       
        // this.$parent.step = this.$parent.cur = 3
      }
    }
}
</script>

<style scoped>
.margin-top-40{
  margin-top: 40px;
}
.demo-spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
}
@keyframes ani-demo-spin {
    from { transform: rotate(0deg);}
    50%  { transform: rotate(180deg);}
    to   { transform: rotate(360deg);}
}
</style>